import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ContactUs from '../views/ContactUsView'
import User from '../views/UserView'
import About from '../views/AboutView'
import NonExisting from '../views/NonExistingView'
import UserProfile from '../views/UserProfileView'
import NamedViews from '../views/NamedViews'
import Org from '../views/OrgView'

Vue.use(VueRouter)

const routes = [
    {
        // 404页面
        path: '*',
        component: NonExisting
    },
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
    {
        // 自义义组件
        path: '/contactus',
        alias: [`/contact-us`, `/contact_us`],   // 路由别名
        component: ContactUs
    },
    {
        // 动态路由
        path: '/user/:id',
        name: 'user',
        component: User,
        children: [
            {
                // 这里是嵌套路由
                // 当 /user/:id/profile 匹配成功，
                // UserProfile 会被渲染在 User 的 <router-view> 中
                // 注意不要以/开头
                path: 'profile',
                component: UserProfile
            }
        ]
    },
    {
        // 命名视图
        path: '/namedViews',
        component: NamedViews,
        children: [
            {
                path: '',
                components: {
                    default: HomeView,
                    about: About,
                    contactus: ContactUs
                }
            }
        ]
    },
    {
        // 重定向
        path: '/redirect-to-about',
        redirect: {
            name: 'about'
        }
    },
    {
        // 路由组件传参
        path: `/org/:orgcode`,
        component: Org,
        props: true,
    }

]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router
